//canvas api https://www.w3school.com.cn/tags/html_ref_canvas.asp 
//https://www.w3school.com.cn/html5/html5_ref_canvas.asp
// 合并
function mix(屏幕像素尺寸, 原图, 新图, 新图位置) {
	// 创建画布
	var canvas = document.createElement('canvas');
	var context = canvas.getContext("2d");
	var ratio = window.devicePixelRatio //getPixelRatio(context);
	let width = Math.floor(屏幕像素尺寸.width * ratio);
	let height = Math.floor(屏幕像素尺寸.height * ratio); //原图.naturalHeight * ratio;
	canvas.width = width;
	canvas.height = height;
	context.rect(0, 0, width, height);
	context.fillStyle = "#fff";
	context.fill();
	let img2width = width / 5;
	let img2height = height / 5;

	// 制作背景图 createPattern 在指定的方向上重复指定的元素
	//var patBg = ctx.createPattern(canvasBg, "repeat");
	// ctx.rect(0, 0, canvas.width, canvas.height);
	// ctx.fillStyle = patBg;
	// ctx.fill();
	left = width - img2width;
	top = height - img2height;
	//context.drawImage(img,x,y,width,height);
	ctx.drawImage(原图, 0, 0, width, height);
	ctx.drawImage(新图, left, top, img2width, img2height);
	// var newImg = new Image();
	// newImg.src = canvas.toDataURL("image/png");
}



/* 像素密度 有的图片 是多个像素挤压到一个屏幕像素中 ,这样显示就会模糊,
	为了解决这个问题,必须明白像素比就是多少个像素挤压到一个像素中
	设备图:原图=devicePixelRatio
	canvas画布:原图=backingStorePixelRatio
	canvas在设备的像素密度 =设备图/canvas=devicePixelRatio/backingStorePixelRatio
	
	canvas画布 宽高 width height
	canvas画布缩放后可视 宽高 style.width height
	
	*将 canvas 的高和宽分别乘以 ratio 将其放大，
	*然后再用 css 将其样式高和宽限制成初始的大小。
	
	https://www.w3cschool.cn/fetch_api/fetch_api-atvq2nma.html
	https://www.cnblogs.com/xieqianli/p/8058072.html
	https://blog.csdn.net/css_666/article/details/105202622
	*/
function getPixelRatio(context) {
	var backingStore = context.backingStorePixelRatio ||
		context.webkitBackingStorePixelRatio ||
		context.mozBackingStorePixelRatio ||
		context.msBackingStorePixelRatio ||
		context.oBackingStorePixelRatio ||
		context.backingStorePixelRatio || 1;
		//devicePixelRatio 一个 CSS 像素的大小与一个物理像素的大小的比值,表示多少个屏幕的实际像素来绘制单个 CSS 像素
	return (window.devicePixelRatio || 1) / backingStore;
};

//
